<template>
	<view>
		<view class="Header nvue" :style="[{backgroundColor:backgroundColorHeader,position:isfixedHeader===0 ? 'fixed' : 'inherit'}]">
			<view class="box1" :style="[{backgroundColor:backgroundColorHeaderTop}]">
				<view class="logo left">
					<view class="logonvue">
						<image class="Image-xiufuipa" :src="AppHeaderlogo" mode="widthFix"></image>
					</view>
				</view>
				<view class="conter" @click="itemTap" data-url="/pages/App/search/search">
					<view class="inputbox" :style="[{'background-color':backgroundColorHeaderInputbox}]">
						<!-- #ifndef APP-NVUE -->
						<u-icon name="sousuo3" custom-prefix="custom-icon" size="30" :color="ColorHeaderInputboxicons"></u-icon>
						<!-- #endif -->
						<!-- #ifdef APP-NVUE -->
						<view class="icons">
							<text class="nvueiconfont" :style="[{'color':ColorHeaderInputboxicons}]">&#xe606;</text>
						</view>
						<!-- #endif -->
						<view class="placeholder">
							<text class="text" :style="[{'color':ColorHeaderInputboxicons}]">{{sokuplaceholder}}</text>
						</view>
					</view>
				</view>
				<!-- 小程序下不需要此部分 -->
				<!-- #ifndef MP -->
				<view class="right" @click="itemTap" data-url="">
					<!-- 下载 -->
					<view class="iconbtn dowu">
						<!-- #ifndef APP-NVUE -->
						<u-icon name="ziyuan16" custom-prefix="custom-icon" size="50" :color="ColorHeaderrighticons"></u-icon>
						<!-- #endif -->
						<!-- #ifdef APP-NVUE -->
						<view class="icons">
							<text class="nvueiconfont xiazai" :style="[{'color':ColorHeaderrighticons}]">&#xe62e;</text>
						</view>
						<!-- #endif -->
					</view>
				</view>
				<!-- #endif -->
				<!-- 小程序胶囊 -->
				<!-- #ifdef MP -->
				<view class="MP" :style="[{'dispaly':'flex'},{'width':MPmenuButtonInfoWidth+'px'}]">
					<!-- 小程序胶囊宽度 -->
				</view>
				<!-- #endif -->
			</view>
			<view class="box2-slot" :style="[{'background-color':backgroundColorHeaderBottom}]">
				<slot name="box2"></slot>
			</view>
		</view>
	</view>
</template>

<script>
	// #ifdef MP
	// 获取小程序胶囊信息 [小程序专用api]
	var menuButtonInfo = uni.getMenuButtonBoundingClientRect()
	//console.log(menuButtonInfo)
	// #endif
	export default {
		name:"FatFatMeng-NVUE-Header",
		props:{
			// #ifndef H5
			// 状态栏高度
			statusBarHeight:{
				type:Number,
				default:0
			},
			// #endif
			//APP首页导航栏logo
			AppHeaderlogo:{
				type:String,
				default:'/static/FatFatMeng-apps/FatFatMeng-image/FatFatMeng-style/FatFatMeng-logo.gif'
			},
			sokuplaceholder:{
				type:String,
				default:'搜索'
			},
			//Header背景颜色【整体】
			backgroundColorHeader:{
				type:String,
				default:'#fff'
			},
			//Header-box1背景颜色【top|含logo 搜索 下载区块】
			backgroundColorHeaderTop:{
				type:String,
				default:'#fff'
			},
			//Header-box2背景颜色【bottom|含navlist区块】
			backgroundColorHeaderBottom:{
				type:String,
				default:'#fff'
			},
			//Header-Inputbox输入框背景颜色【输入框】
			backgroundColorHeaderInputbox:{
				type:String,
				default:'rgba(175, 183, 196, .3)'
			},
			//Header-Inputboxicons输入框内文字和图标颜色【输入框文字Icon图标】
			ColorHeaderInputboxicons:{
				type:String,
				default:'#888888'
			},
			//Header-ringhticons右边图标颜色【右边下载Icon图标】
			ColorHeaderrighticons:{
				type:String,
				default:'#333333'
			},
			//导航栏是否固定？0固定 1不固定
			isfixedHeader:{
				type:Number,
				default:1
			}
		},
		data() {
			return {
				// #ifndef H5 || MP
				//状态栏高度
				statusBarHeight:this.statusBarHeight,
				// #endif
				logo:'',
				// #ifdef MP
				// 小程序胶囊菜单按钮的宽度
				MPmenuButtonInfoWidth:uni.getMenuButtonBoundingClientRect().width,
				MPmenuButtonInfoHeight:uni.getMenuButtonBoundingClientRect().height
				// #endif
			};
		},
		methods:{
			itemTap(e) {
				//console.log(e)
				let itemUrl = e.currentTarget.dataset.url
				console.log(itemUrl)
				this.$emit('change',itemUrl)
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import './NVUE-Header.scss';
</style>
